<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<title>TravelDream - register</title>

	<!-- Approccio mobile first usato da foundation -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<!-- Fogli di stile CSS con il mio foglio di stile dichiarato dopo quelli di foundation per sovrascrivere con modifiche mie-->
	<link rel="stylesheet" href="css/normalize.css" />
	<link rel="stylesheet" href="css/foundation.css" />
	<link rel="stylesheet" href="css/tdStyle.css" />

	<!-- Modernizr -->
	<script src="js/vendor/custom.modernizr.js"></script>
	<!-- Serve a internet explorer 8 poiche non supportato da Foundation 5 -->
	<script>
		Modernizr.load({
    		test: Modernizr.mq('only all'),
    		nope: 'js/vendor/respond.min.js'
		});
	</script>
</h:head>
<h:body>

	<div id="header">

		<div class="large-12columns">
			<div id="logo" class="large-6 columns">
				<a href="home.xhtml"><img src="images/TdWebWorld.png"
					width="150" height="150" alt="" title="" border="0" /></a>
			</div>


		</div>
	</div>

	<div id="main_content" style="padding-top: 45px;">

		<div class="row">
			<div class="large-4 columns">

				<h2>Registration</h2>

				<h:form id="regForm">
					<h:outputLabel for="email">Email:</h:outputLabel>
					<p:inputText id="email" value="#{registerBean.user.email}"
						required="true" />
					<p:message for="email" />
					<h:outputLabel value="#{registerBean.errore}"/>

					<h:outputLabel for="firstName">First name:</h:outputLabel>
					<p:inputText id="firstName" value="#{registerBean.user.firstName}"
						required="true" />
					<p:message for="firstName" />

					<h:outputLabel for="lastName">Last name:</h:outputLabel>
					<p:inputText id="lastName" value="#{registerBean.user.lastName}"
						required="true" />
					<p:message for="lastName" />

					<h:outputLabel for="password">Password:</h:outputLabel>
					<p:password id="password" value="#{registerBean.user.password}"
						required="true" feedback="true" match="pwd2" label="Password" />
					<p:message for="password" />

					<h:outputLabel for="pwd2">Confirm Password:</h:outputLabel>
					<p:password id="pwd2" label="Confirm Password"
						value="#{registerBean.user.password}" required="true" />
					<br />

					<h:outputText value="Date:(DD/MM/YYYY) " />
					<p:calendar value="#{registerBean.user.birthDate}" required="true"
						pattern="dd/MM/yyyy" yearRange="1930:#{registerBean.today}"
						navigator="true" />
					<br />

					<h:outputLabel for="address">Address:</h:outputLabel>
					<p:inputText id="address" value="#{registerBean.user.address}"
						required="true" />
					<br />

					<h:outputLabel for="city">City:</h:outputLabel>
					<p:inputText id="city" value="#{registerBean.user.city}"
						required="true" />

					<br />

					<h:outputLabel for="country">Country:</h:outputLabel>
					<p:inputText id="country" value="#{registerBean.user.country}"
						required="true" />

					<h:commandButton value="Register" update="regForm"
						action="#{registerBean.register()}" required="true" />
				</h:form>
			</div>

			<div class="large-8 columns" style="text-align: right">
				<ul data-orbit="slideshow" id="slideshow"
					data-options="timer_speed:4000;  
 							pause_on_hover: true; resume_on_mouseout: true; slide_number:false;">
					<li>
						<div>
							<h2>Best offer!</h2>
							<h3>Discover incredible prices</h3>
							<img id="image" src="images/discount.jpg" width="300"
								height="150" align="right" />
						</div>

					</li>
					<li>
						<div>
							<h2>Personalize your trip!</h2>
							<h3>Choose what suits you best</h3>
							<img id="image" src="images/travel.jpg" width="300" height="150"
								align="right" />
						</div>
					</li>
					<li>
						<div>
							<h2>Giftlist!</h2>
							<h3>Let your friends know what you want</h3>
							<img id="image" src="images/gift.jpg" width="300" height="150"
								align="right" />
						</div>

					</li>

				</ul>
			</div>
		</div>
	</div>

	<!-- Foundation adotta come libreria di appoggio jQuery-->
	<script src="/js/vendor/jquery.js"></script>
	<script src="/js/vendor/fastclick.js"></script>
	<!-- Carico librerie javascript, per ora ho caricato intera libreria minimale
	 invece che unicamente i plugin ncessari -->
	<script src="js/foundation.min.js"></script>
	<script src="js/foundation.orbit.js"></script>

	<script>
		$(document).foundation();
	</script>
</h:body>
</html>